<!--  -->
<template>
  <div class="address">
    <h1>收货地址</h1>
    <!-- 地址信息展示 -->
    <h2>地址列表</h2>
    <el-table
      ref="multipleTable"
      :data="addressInfoList"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="phone" label="手机号" width="120"> </el-table-column>
      <el-table-column prop="detailAddress" label="地址" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="postCode" label="邮编" width="120"> </el-table-column>
      <el-table-column prop="defaultStatus" width="120" label="是否默认">
        <template slot-scope="scope">
          {{ scope.row.defaultStatus === 1  ? "默认" : "" }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button
            @click.native.prevent="deleteRow(scope.$index, addressInfoList)"
            type="text"
            size="small"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <h2>添加收货地址</h2>
    <el-form
      :model="addressInfo"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm addressUpdate"
    >
      <el-form-item label="收货人姓名" prop="name">
        <el-input style="width: 400px" v-model="addressInfo.name"></el-input>
      </el-form-item>
      <el-form-item style="width: 500px" label="手机号" prop="phone">
        <el-input v-model="addressInfo.phone"></el-input>
      </el-form-item>
      <el-form-item style="width: 500px" label="收货地址" prop="detailAddress">
        <el-input v-model="addressInfo.detailAddress"></el-input>
      </el-form-item>
      <el-form-item style="width: 500px" label="邮政编码" prop="postCode">
        <el-input v-model="addressInfo.postCode"></el-input>
      </el-form-item>
      <el-form-item label="是否默认" prop="defaultStatus">
        <el-radio v-model="addressInfo.defaultStatus" label=1>是</el-radio>
        <el-radio v-model="addressInfo.defaultStatus" label=2>否</el-radio>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="onSubmit">保存</el-button>

    <!-- 编辑框展示 -->
    <el-dialog title="编辑收货地址" :visible.sync ="dialogFormVisible">
      <el-form
        :model="editAddressInfo"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm addressUpdate"
      >
        <el-form-item label="收货人姓名" prop="name">
          <el-input style="width: 400px" v-model="editAddressInfo.name"></el-input>
        </el-form-item>
        <el-form-item style="width: 500px" label="手机号" prop="phone">
          <el-input v-model="editAddressInfo.phone"></el-input>
        </el-form-item>
        <el-form-item style="width: 500px" label="收货地址" prop="detailAddress">
          <el-input v-model="editAddressInfo.detailAddress"></el-input>
        </el-form-item>
        <el-form-item style="width: 500px" label="邮政编码" prop="postCode">
          <el-input v-model="editAddressInfo.postCode"></el-input>
        </el-form-item>
        <el-form-item label="是否默认" prop="defaultStatus">
          <el-radio v-model="editAddressInfo.defaultStatus" label=1>是</el-radio>
          <el-radio v-model="editAddressInfo.defaultStatus" label=2>否</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAdderssInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import cookie from "js-cookie";
export default {
  name: "Address",
  data() {
    return {
      addressInfo: {
        userId: "",
        name: "",
        phone: "",
        detailAddress: "",
        postCode: "",
        defaultStatus: 2,
      },
      editAddressInfo: {
        defaultStatus:2
      },
      rules: {
        name: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
        nadetailAddress: [{ required: true, message: "地址不能为空", trigger: "blur" }],
        postCode: [{ required: true, message: "邮政编码不能为空", trigger: "blur" }],
        detailAddress: [{ required: true, message: "收获地址不能为空", trigger: "blur" }],
        phone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: "请输入合法手机号/电话号",
            trigger: "blur",
          },
        ],
      },
      addressInfoList: [
        
      ],
      deleAdressID:[],
      multipleSelection: [],
      // 编辑弹框的显示与隐藏
      dialogFormVisible: false,
      userId:''
    };
  },
  created(){
    this.userId = JSON.parse(cookie.get("userInfo")).id
    this.getAddressInfo()
  },
  methods: {
    // 编辑弹框显示
    handleClick(row) {
      this.dialogFormVisible = true, 
      this.editAddressInfo = row;
    },
    // 提交编辑信息
    async  submitAdderssInfo(){
      this.editAddressInfo.userId = this.userId;
      // if(this.editAddressInfo.defaultStatus === 1){
      //   this.addressInfoList.forEach((item,index)=>{
      //     if(item[index].defaultStatus === 1){var newDefault = index}
      //     item[index].defaultStatus = 2
      //   })
      // }
      const {data:res} = await this.$http.post("/dqxmall/useraddress/update",this.editAddressInfo)
      if(res.msg === 'success'){
        this.dialogFormVisible = false, 
        this.$message.success("修改成功")
        this.getAddressInfo()  
      }
      
    },
    // 移除操作
    async  deleteRow(index,rows) {
      this.deleAdressID.push(rows[index].id) 
      const {data:res}  = await this.$http.post("/dqxmall/useraddress/delete", this.deleAdressID)
      if(res.msg === "success"){
        this.$message.success("删除成功")
        this.getAddressInfo()  
      }else{
        this.$message.error("删除失败");
      }
    },
    // 获取地址信息
    async  getAddressInfo(){
      const {data:res} = await this.$http.get("/dqxmall/useraddress/info")
      // console.log(res);
      if(res.msg === 'success'){
        this.addressInfoList = res.userAddress;
      }
    },
    // 添加新地址
    async onSubmit() {
      // console.log("添加地址");
      this.addressInfo.userId = JSON.parse(cookie.get("userInfo")).id;
      const { data: res } = await this.$http.post(
        "/dqxmall/useraddress/save",
        this.addressInfo
      );
      // console.log(res)
      if (res.msg === "success") {
        this.$message.success("保存成功");
        this.getAddressInfo()  
      }
    },
   
  },
};
</script>
<style lang="less" scoped>
.address {
  h1 {
    font-weight: 700;
    font-size: 25px;
    text-align: center;
    margin: 20px;
  }
  h2 {
    margin: 20px;
    color: red;
  }
}
</style>
